<template>
  <div>
    <u-popup :show="show" mode="bottom" @close="close" :closeOnClickOverlay="false" :zIndex="998" :overlayStyle="{'z-index': 997}">
			<view class="message-content">
				<view class="header">
          <u-row justify="space-between" style="width: 100%">
            <view style="width: 60px;">
              
            </view>
            <view>操作</view>
            <view style="width: 60px;">
              <view class="btn small danger" @click="delRow" v-if="form.id">删除</view>
            </view>
          </u-row>
        </view>
				<view class="main" style="padding: 20px 10px;">
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">名称：</view>
            <view style="flex: 1">
              <u-input v-model="form.name" type="text" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">价格：</view>
            <view style="flex: 1">
              <u-input v-model="form.price" type="digit" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">质量：</view>
            <view style="flex: 1">
              <u-input v-model="form.quality" type="text" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">库存：</view>
            <view style="flex: 1">
              <u-input v-model="form.residualInventory" type="digit" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">出库存：</view>
            <view style="flex: 1">
              <u-input v-model="form.outbound" type="digit" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">总库存：</view>
            <view style="flex: 1">
              <u-input v-model="form.totalInventory" type="digit" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">酒精度：</view>
            <view style="flex: 1">
              <u-input v-model="form.alcoholicStrength" type="digit" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">执行标准：</view>
            <view style="flex: 1">
              <u-input v-model="form.standard" type="text" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">成分：</view>
            <view style="flex: 1">
              <u-input v-model="form.ingredient" type="text" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">备案号：</view>
            <view style="flex: 1">
              <u-input v-model="form.recordNumber" type="text" />
            </view>
          </u-row>
          <u-row class="m-b-10">
            <view style="width: 88px; text-align: right;" class="txt-info">门店：</view>
            <view style="flex: 1">
              <view @click="openStores" style="height: 20px; border: 1px solid #e2e2e2; line-height: 20px; padding: 10px;">{{ form.storeName }}</view>
            </view>
          </u-row>
        </view>
				<view class="footer">
          <view class="cancel-btn" @click="close">取消</view>
          <view class="confirm-btn" @click="confirm">确认</view>
        </view>
			</view>
    </u-popup>

    <stores ref="stores" />
  </div>
</template>

<script>
import { toast } from '@/utils/util'
import stores from '@/pages/components/stores/stores'
export default {
  components: { stores },
  data() {
    return {
      show: false,
			callback: null,
      form: {}
    }
  },
  mounted() {},
  methods: {
    open(options, cb) {
      if (options) {
        this.form = {
          name: options.name,
          price: options.price,
          quality: options.quality,
          residualInventory: options.residualInventory,
          outbound: options.outbound,
          totalInventory: options.totalInventory,
          alcoholicStrength: options.alcoholicStrength,
          standard: options.standard,
          ingredient: options.ingredient,
          recordNumber: options.recordNumber,
          storeName: options.storeName,
          storeId: options.storeId,
          id: options.id
        }
      } else {
        this.form = {}
      }
      this.show = true;
      this.callback = cb;
    },
    close() {
      this.callback(false)
      this.show = false;
    },
    openStores() {
      this.$refs.stores.open(data => {
        if (data) {
          this.$set(this.form, 'storeName', data.storeName)
          this.$set(this.form, 'storeId', data.storeId)
        }
      })
    },
    confirm() {
      if (!this.form.name) {
        toast('请填写名称信息')
        return
      }
      if (!this.form.price) {
        toast('请填写价格信息')
        return
      }
      if (!this.form.residualInventory && +this.form.residualInventory !== 0) {
        toast('请填写库存信息')
        return
      }
      if (!this.form.outbound && +this.form.outbound !== 0) {
        toast('请填写出库存信息')
        return
      }
      if (!this.form.totalInventory && +this.form.totalInventory !== 0) {
        toast('请填写总库存信息')
        return
      }
      if (!this.form.storeName) {
        toast('请填写门店信息')
        return
      }
      
      if (this.form.id) {
        this.$api.food.update(this.form)
        .then(res => {
          if (res.code == 200) {
            this.callback(true)
            this.show = false;
          } else {
            toast(res.message)
          }
        })
      } else {
        this.$api.food.add(this.form)
        .then(res => {
          if (res.code == 200) {
            this.callback(true)
            this.show = false;
          } else {
            toast(res.message)
          }
        })
      }
    },
    delRow() {
      this.$api.food.delete(this.form.id)
      .then(res => {
        if (res.code == 200) {
          this.callback(true)
          this.show = false;
        } else {
          toast(res.message)
        }
      })
    },
    // 业务代码
    selectPerson() {
      this.$refs.personSelect.confirm(data => {
        // 从personSelect组件获取选择的员工信息
        // 传回父页面
        this.callback(data)
        this.show = false;
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.message-content
  width 100vw
  background-color #ffffff
  border-radius 8px 8px 0 0
  position relative
  overflow hidden
  font-size 16px
  .header
    display flex
    justify-content space-between
    align-items center
    height 45px
    background-color #ffffff
    color #444444
    padding 0 10px
    border-bottom 1px solid #eeeeee
  .main
    position relative
    height 70vh
    overflow scroll
  .footer
    position relative
    text-align center
    color #ffffff
    height auto
    display flex
    
.confirm-btn
  flex 1
  height 44px
  line-height 44px
  text-align center
  color #FFFFFF
  background-color #0BB78E
  font-size 16px
.cancel-btn
  flex 1
  height 44px
  line-height 44px
  text-align center
  color #333333
  background-color #ffffff
  font-size 16px
  border-top 1px solid #e2e2e2
  box-sizing border-box

.no-data
  text-align center
  padding-top 120px
  color #999999

</style>